<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
    GridComponent,
    type GridComponentOption,
    MarkLineComponent,
    type MarkLineComponentOption
} from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';

echarts.use([
    GridComponent,
    MarkLineComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
    GridComponentOption | MarkLineComponentOption | LineSeriesOption
>;


function drawDailyChart() {
    var chartDom = document.getElementById('dailyChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        xAxis: {
            type: 'category',
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        },
        yAxis: {
            type: 'value',
            min: 200,
            max: 240,
            interval: 5
        },
        grid: {
            left: '8%',
            right: '5%',
            bottom: '50'
        },
        series: [
            {
                data: [220, 234, 224, 218, 205, 223, 205, 220, 230, 224, 218, 205, 235, 220, 220, 230, 224, 218, 205, 223, 220, 201, 230, 224, 218, 205, 223, 220],
                type: 'line',
                markLine: {
                    data: [
                        {
                            name: '额定电压',
                            yAxis: 220,
                            label: {
                                formatter: '{b}',
                                color: '#91cc75',
                                position: 'start'
                            },
                            lineStyle: { color: '#91cc75' }
                        },
                        {
                            name: '高压',
                            yAxis: 230,
                            label: {
                                formatter: '{b}',
                                color: '#ee6666',
                                position: 'start'
                            },
                            lineStyle: { color: '#ee6666' }
                        },
                        {
                            name: '低压',
                            yAxis: 210,
                            label: {
                                formatter: '{b}',
                                color: '#fac858',
                                position: 'start'
                            },
                            lineStyle: { color: '#fac858' }
                        }
                    ],
                    lineStyle: {
                        color: '#91cc75',
                        type: 'solid',
                        width: 1
                    },
                    symbol: 'none',
                    label: {
                        distance: [40, 8]
                    }
                },
                label: {
                    show: true,
                    color: '#fff'
                }
            }
        ]
    };

    option && myChart.setOption(option);

}

let highData = [
    { id: 1, time: '01-14 15:01', volts: '235V' },
    { id: 2, time: '01-14 15:21', volts: '231V' },
    { id: 3, time: '01-14 15:23', volts: '236V' },
    { id: 4, time: '01-14 15:31', volts: '232V' },
    { id: 5, time: '01-14 15:43', volts: '238V' },
]

let lowData = [
    { id: 1, time: '01-14 15:07', volts: '203V' },
    { id: 2, time: '01-14 15:16', volts: '205V' },
    { id: 3, time: '01-14 15:29', volts: '206V' },
]

onMounted(() => {
    drawDailyChart()
})

</script>

<template>
    <div class="daily">
        <div class="dailyLable">
            过去24小时每小时平均电压
        </div>
        <div id="dailyChart"></div>
    </div>
    <div class="hour">
        <div class="hourLable">
            过去一小时高压/低压统计
        </div>
        <div class="hourTable">
            <div class="warnTable">
                <div class="warnHeader">
                    <div class="timeTitle">高压时间</div>
                    <div class="voltsTitle">实际电压</div>
                </div>
                <div class="warnInfo" v-for="item in highData" :key="item.id">
                    <div class="time">{{ item.time }}</div>
                    <div class="volts errorColor">{{ item.volts }}</div>
                </div>
            </div>
            <div class="errorTable">
                <div class="errorHeader">
                    <div class="timeTitle">低压时间</div>
                    <div class="voltsTitle">实际电压</div>
                </div>
                <div class="errorInfo" v-for="item in lowData" :key="item.id">
                    <div class="time">{{ item.time }}</div>
                    <div class="volts warnColor">{{ item.volts }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="currently">
        <div class="topDiv">
            <span>当前电压：</span>
            <span class="currentVolts">221V</span>
        </div>
        <div>
            <span>额定电压：</span>
            <span>220V</span>
        </div>
        <div>
            <span>高压阈值：</span>
            <span>230V</span>
        </div>
        <div>
            <span>低压阈值：</span>
            <span>210V</span>
        </div>
    </div>
</template>

<style scoped>
.daily {
    width: 96%;
    height: 450px;
    margin: 0 auto;
    border: 1px solid #596074;
}

.dailyLable {
    height: 30px;
    margin-left: 50px;
    font-style: 14px;
    line-height: 60px;
    letter-spacing: 2px;
}

#dailyChart {
    width: 100%;
    height: 420px;
}

.hour {
    float: left;
    width: 64%;
    height: 350px;
    margin-top: 20px;
    margin-left: 30px;
    border: 1px solid #596074;
}

.hourLable {
    height: 40px;
    padding-left: 30px;
    border-bottom: 1px solid #596074;
    font-style: 14px;
    line-height: 40px;
    letter-spacing: 2px;
}

.hourTable {
    display: flex;
}

.warnTable,
.errorTable {
    flex: 1;
    height: 310px;
}

.warnTable {
    border-right: 1px solid #596074;
}

.warnHeader,
.errorHeader {
    flex: 1;
    display: flex;
    ;
}

.timeTitle,
.voltsTitle {
    flex: 1;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #596074;
    background-color: #1c3062;
}

.timeTitle {
    border-right: 1px solid #596074;
}

.warnInfo,
.errorInfo {
    display: flex;
    border-bottom: 1px solid #596074;
}

.time,
.volts {
    flex: 1;
    height: 39px;
    line-height: 39px;
    text-align: center;
}

.time {
    border-right: 1px solid #596074;
}

.warnColor,
.errorColor {
    color: var(--warn-color);
    font-size: 16px;
    font-weight: 500;
}

.errorColor {
    color: var(--danger-color);
}

.currently {
    float: left;
    width: 30%;
    height: 350px;
    margin-top: 20px;
    margin-left: 27px;
}

.currently div{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
}

.currently .topDiv{
    margin-top: 50px;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
}

.currently .topDiv .currentVolts{
    font-size: 28px;
    font-weight: 500;
    color: var(--common-color);
}
</style>